<template>
  <div class="table-wrap">
    <el-table
      :data="tableData"
      v-loading="loading"
      border
      stripe
      @row-click="getDetails"
      style="width: 70vw;margin-left:4vw;"
    >
      <el-table-column prop="name" label="名称"></el-table-column>
      <el-table-column prop="account" label="账号"></el-table-column>
      <el-table-column prop="address" label="操作">
        <ul class="operation">
          <li v-for="(item,index) in items" :key="index">
            <el-button type="text" @click="onclickButton(index)">
              <a href="javascript:;" :class="item.color">{{item.text}}</a>
            </el-button>
          </li>
        </ul>
      </el-table-column>
    </el-table>
    <!-- 修改 item -->
    <el-dialog title="修改" :visible.sync="modifyFormVisible" width="30%" center>
      <span style="visibility: hidden;">{{id}}</span>
      <br />
      <span>账号：</span>
      <p style="width:80%;padding:10px 0 0 28px;display:inline-block;">{{account}}</p>
      <p>
        <br />
        <span>名称：</span>
        <el-input v-model="name" placeholder="请输入内容" style="width:80%;padding:10px 0 10px 28px;"></el-input>
      </p>
      <div slot="footer" class="dialog-footer">
        <el-button @click="modifyFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleEdit">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 重置密码 -->
    <el-dialog title="重置密码" :visible.sync="addFormVisible" width="30%" center>
      <span>账号：</span>
      <p style="width:80%;padding:10px 0 0 54px;display:inline-block;">{{account}}</p>
      <p>
        <br />
        <span>密码：</span>
        <el-input
          v-model="input3"
          show-password
          type="password"
          style="width:75%;padding:10px 0 10px 56px;"
        ></el-input>
        <br />
        <span>确认密码：</span>
        <el-input
          v-model="input4"
          show-password
          type="password"
          style="width:75%;padding:0 0 10px 28px;"
        ></el-input>
      </p>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handlePassword">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 删除 -->
    <el-dialog title="删除" :visible.sync="deleteFormVisible" width="30%" center>
      <p class="center">您确定要删除数据吗？</p>
      <div slot="footer" class="dialog-footer">
        <el-button @click="deleteFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleDelete()">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 确认删除 -->
    <el-dialog title="确认删除" :visible.sync="confirmFormVisible" width="30%" center>
      <p class="center">您现在正在做一个危险操作！！</p>
      <br />
      <p class="center red">如果删除该单位，将会导致整年的信息全部被驳回！</p>
      <br />
      <p class="center red">您确定要继续吗？</p>
      <div slot="footer" class="dialog-footer">
        <el-button @click="confirmFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmDelete">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 真的确认删除 -->
    <el-dialog title="确认删除" :visible.sync="finalFormVisible" width="30%" center>
      <p class="center">请输入管理员密码</p>
      <el-input
        v-model="confirmPassword"
        type="password"
        placeholder="请输入密码"
        style="width:80%;padding:20px 0 0 70px;"
      ></el-input>
      <div slot="footer" class="dialog-footer">
        <el-button @click="finalFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="finalDelete">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import md5 from "js-md5";
export default {
  data() {
    return {
      loading: false,
      modifyFormVisible: false,
      addFormVisible: false,
      deleteFormVisible: false,
      confirmFormVisible: false,
      finalFormVisible: false,
      account: "", //账号
      name: "", //名称
      input3: "", //密码
      input4: "", //确认密码
      index: "",
      id: "",
      confirmPassword: "", //删除时输入管理员密码
      items: [
        {
          color: "modify",
          text: "修改名称"
        },
        {
          color: "modify",
          text: "重置密码"
        },
        {
          color: "delete",
          text: "删除"
        }
      ],
      tableData: [],
      nowSelectRow: null
    };
  },
  mounted() {
    let _this = this;
    this.loading = true;
    // this.$http({
    //     method: "get",
    //     // url: "/department/getDepartmentPage",
    //     getDepartmentByPage
    //     params: {
    //         page: 1,
    //         limit: 99
    //     }
    // })
    this.$http({
      method: "get",
      url: "/api/department/getDepartmentByPage",
      params: {
        page: 1,
        limit: 99
      }
    })
      .then(function(response) {
        if (response.data.code === 0) {
          _this.tableData = response.data.data.result;
        } else {
          console.log(response.data.message);
        }
        _this.loading = false;
      })
      .catch(function(error) {
        console.log(error);
      });
  },
  methods: {
    getDetails(row) {
      var account = row.account;
      var name = row.name;
      var id = row.id;
      this.id = id;
      this.account = account;
      this.name = name;
    },
    getuser() {
      let _this = this;
      _this.loading = true;
      _this
        .$http({
          method: "get",
          url: "/api/department/getDepartmentByPage",
          params: {
            page: 1,
            limit: 99
          }
        })
        .then(function(response) {
          if (response.data.code === 0) {
            _this.tableData = response.data.data.result;
          } else {
            console.log("test" + response.data.message);
          }
          _this.loading = false;
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    onclickButton: function(index) {
      if (index == 0) {
        this.modifyFormVisible = true;
      } else if (index == 1) {
        this.addFormVisible = true;
      } else if (index == 2) {
        this.deleteFormVisible = true;
      }
    },
    // 修改 item
    handleEdit() {
      let _this = this;
      this.loading = true;
      // this.$http({
      //     method: "post",
      //     url: "/department/editDepartmentName",
      //     data: {
      //         id: _this.id,
      //         name: _this.name
      //     }
      // })
      var editres = {
        id: _this.id,
        name: _this.name
      };
      var url = "/api/department/editDepartmentName";
      _this.$axios("post", url, editres, function(data) {
        _this.getuser();
        _this.modifyFormVisible = false;
      });
      // .then(function (response) {
      //     if (response.data.code === 0) {
      //         _this.tableData.name = _this.name;
      //         _this.getuser();
      //         _this.message(true, '修改成功', 'success');
      //     } else {
      //         _this.message(true, response.data.msg, 'error');
      //     }
      //     _this.loading = false;
      //     _this.modifyFormVisible = false;
      // })
      // .catch(function (error) {
      //     console.log(error);
      // });
    },
    // 删除 item
    handleDelete() {
      this.confirmFormVisible = true;
      this.deleteFormVisible = false;
    },
    // 确认删除 item
    confirmDelete() {
      this.finalFormVisible = true;
      this.confirmFormVisible = false;
    },
    // 真的确认删除 item
    finalDelete() {
      var reg = /[0-9a-zA-Z]{4,23}/;
      var self = this;
      self.loading = true;
      if (reg.test(this.confirmPassword)) {
        let thisAccount = self.common.getCookie("account");
        var confirmmd = md5(thisAccount + this.confirmPassword);
        var deleteres = {
          id: self.id,
          password: confirmmd
        };
        var url = "/api/department/delDepartment";
        self.$axios("post", url, deleteres, function(data) {
          if (data.code == 4) {
            self.$message.success("删除成功");
          } else {
            self.$message.error("密码错误请重新输入");
          }
          self.getuser();
          self.finalFormVisible = false;
          self.confirmPassword = "";
        });
      } else {
        self.$message.error("密码只能是英文或者数字");
      }
    },
    // 重置密码
    handlePassword: function() {
      let _this = this;
      var reg = /^(\w*(?=\w*\d)(?=\w*[A-Za-z])\w*){6,20}$/;

      if (reg.test(_this.input3) && reg.test(_this.input4)) {
        if (_this.input3 !== _this.input4) {
          // _this.message(true, '两次密码输入的不一致', 'error');
          _this.$message.error("两次密码输入的不一致");
          return;
        }
      } else {
        // _this.message(true, '密码必须是长度为6到20位，且必须有数字、字母和下划线组成', 'error');
        _this.$message.error(
          "密码必须是长度为6到20位，且必须有数字、字母和下划线组成"
        );
        return;
      }
      var password1 = md5(this.account + this.input3);
      var password2 = md5(this.account + this.input4);
      var resetpassword = {
        id: _this.id,
        password: password1,
        surePassword: password2
      };
      var url = "/api/department/editDepartmentPassword";
      _this.$axios("post", url, resetpassword, function(data) {
        _this.getuser();
        _this.addFormVisible = false;
      });
      // .then(function (response) {
      //     console.log(response)
      //     if (response.data.code === 0) {
      //         _this.message(true, response.data.msg, 'success');
      //     } else {
      //         _this.message(true, response.data.msg, 'error');
      //     }
      // })
      // .catch(function (error) {
      //     _this.message(true, '系统错误，请刷新后重试', 'error');
      // });
    }
  }
};
</script>

<style scoped>
.modify {
  color: rgb(90, 172, 247);
  margin-right: 0.8vw;
}

.delete {
  color: rgba(206, 47, 52, 1);
}

.table-wrap {
  height: 54vh;
  overflow-y: scroll;
}

.operation > li {
  display: inline-block;
}

.center {
  text-align: center;
}

.red {
  color: red;
}
</style>

